<template>
  <div class="header">
    <!-- 标题 -->
    <div class="title">
      <h3>聚外设</h3>
    </div>
    <!-- 内容区域 -->
    <div class="msg">
      <!-- 每个元素的两侧间隔相等 -->
      <van-row type="flex" justify="space-around">
        <van-col span="3">商标</van-col>
        <van-col span="12" id="search1">
          <van-search
            shape="round"
            v-model="value"
            placeholder="搜索您想要的商品"
          />
        </van-col>
        <van-col span="3">
          <router-link to="/sort" tag="li">
            <span class="iconfont font">&#xe62f;</span>
            <p>分类</p>
          </router-link>
        </van-col>
      </van-row>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <van-row>
        <van-col span="4">
          <router-link to="/rec" tag="li"> 推荐 </router-link>
        </van-col>
        <van-col span="4">
          <router-link to="/enc" tag="li"> 百科 </router-link>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>

// icon图标
import font from "../assets/font/iconfont.css";

export default {
  
  props: {},
  data() {
    return {
      value: "",
    };
  },

  methods: {},
};
</script>

// 用style中的scoped(独立样式作用域)属性,这个属性会在编译后生成随机的属性选择器,来避免选择器重复的问题
<style scoped>
.header {
  position: fixed;
  top: 0rem;
  left: 0rem;
  width: 100%;
  background-image: linear-gradient(#fb4c2e, #fba499);
  color: #fff;
  overflow: hidden;
  z-index: 999;
}
.title {
  text-align: center;
  margin: 0.25rem;
}
.msg {
  height: 0.6rem;
  margin-bottom: 0.2rem;
}
.van-search {
  padding: 0rem;
  border-radius: 999px;
}
.van-row--justify-space-around {
  align-items: center;
  text-align: center;
}
.van-row {
  text-align: center;
}
.nav {
  height: 0.4rem;
  color: #f9e3e0;
  margin-left: 0.2rem;
  margin-bottom: 0.1rem;
}
.router-link-active {
  font-size: 0.22rem;
  color: #fff;
}
.router-link-active:after {
  content: "";
  width: 20%;
  height: 1px;
  display: block;
  margin: 0 auto;
  border-bottom: 2px solid #fff;
  padding: 1px;
}
</style>
